<template>
  <div class="shop_box">
    <!-- <div class="shop_header">
      <div class="search-bar">
        <van-icon class="back-icon" name="arrow-left" @click="back" />
        <div>购物车({{ cartItems.length }})</div>
        <van-search class="search-input" placeholder="搜索订单" wrap-with-form />
      </div>
    </div> -->
    <div class="shop_header">
      <div class="header-css">
        <img style="width: 20px;" src="../../assets/shopcar/location.png" alt="">
        <div>送至：小兵旗舰店</div>
      </div>
      <div class="header-css">
        <img style="width: 20px;" src="../../assets/shopcar/contact.png" alt="">
        <div> 联系人：王可可 </div>
      </div>
    </div>
    <div class="shop_body">
      <van-checkbox-group v-model="checkedItems" ref="checkboxGroup">
        <van-swipe-cell v-for="item in cartItems" :key="item.id">
          <div class="shop_card">
            <div class="shop_card_left">
              <van-checkbox :name="item.id"></van-checkbox>
              <div class="shop_card_left_img">
                <img src="../../../public/msg/avatar1.jpeg">
              </div>
            </div>
            <div class="shop_card_right">
              <div style="font-size: 14px;">
                3件套 | MEDIHEAL 美迪惠尔 N.M.F 针剂水库保湿 10片/盒
              </div>
              <!-- <div class="title">
                {{ item.name }}
              </div>
              <div class="info">
                {{ item.spec }}
              </div>
              <div class="tips">
                七天无理由退货 急速退款
              </div> -->
              <div class="price">
                ￥{{ item.price }}
                <van-stepper v-model="item.quantity" integer min="1" max="99" />
              </div>
            </div>

            <div class="shop-status">
              已失效
            </div>

          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item.id)" />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>

    <div class="shop_footer">
      <div class="settlement">
        <div class="left">
          <van-checkbox v-model="checkedAll">全选</van-checkbox>
          <div class="leftCount">
            <span>
              合计:<span style="color: red;font-size: 16px;font-weight: 700;">￥{{ totalPrice }}</span>
            </span>
            <!-- <span>
              优惠减: <span style="color: red;font-size: 14px;font-weight: 700;">￥{{ '20.00' }}</span>
            </span> -->
          </div>
        </div>
        <van-button type="danger" size="small" @click="onSubmit" style="border-radius: 7px;">
          <span style="padding: 0 15px; font-weight: 700;">去结算</span>
        </van-button>
      </div>
    </div>

    <van-action-sheet v-model:show="showBuyInfo" title=" ">
      <div style="padding: 15px;">
        <div class="address">
          <div class="icon">
            <van-icon name="location-o" />
          </div>
          <div class="address_info">
            <div class="address_name">
              烟台开发凤台小区店一号门店
            </div>
            <div class="address_address">
              山东烟台市开发区烟台凤台小区12号楼
            </div>
          </div>
        </div>
        <div class="agent">
          <div class="icon">
            <van-icon name="manager-o" />
          </div>
          <div>
            代理姓名： 张三
          </div>
        </div>
        <div class="consignee">
          <div class="icon">
            <van-icon name="manager-o" />
          </div>
          <van-field v-model="consignee" placeholder="请输入收货人信息" />
        </div>
        <div class="line" style="margin-bottom: 20px;"></div>
        <div>
          <div class="shop_card" v-for="item in goodsList">
            <div class="shop_card_left">
              <div class="shop_card_left_img">
                <img src="../../../public/msg/avatar1.jpeg">
              </div>
            </div>
            <div class="shop_card_right">
              <div class="title">
                {{ item.name }}
              </div>
              <div class="info">
                {{ item.spec }}
              </div>
              <div class="tips">
                七天无理由退货 急速退款
              </div>
              <div class="price">
                ￥{{ item.price }}
                <van-stepper v-model="item.quantity" integer min="1" max="99" />
              </div>
            </div>
          </div>
          <div style="height: 20px;"></div>
        </div>
        <div class="action_show_btn">
          <span>
            合计:<span style="color: red;font-size: 16px;font-weight: 700;">￥{{ totalPrice }}</span>
          </span>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <van-button type="danger" size="small" @click="onSubmit" style="border-radius: 7px;">
            <span style="padding: 0 15px; font-weight: 700;">提交</span>
          </van-button>
        </div>
      </div>
    </van-action-sheet>

  </div>
</template>

<script setup>
import { Dialog } from 'vant';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const checked = ref(false) // 选择框
// 总价
const totalPrice = computed(() => {
  return cartItems.value
    .filter(item => checkedItems.value.includes(item.id))
    .reduce((sum, item) => sum + item.price * item.quantity, 0);
});

// 模拟数据
const cartItems = ref([
  {
    id: 1,
    name: '商品名称1',
    price: 98.0,
    spec: '规格：默认',
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    quantity: 1
  },
  {
    id: 2,
    name: '商品名称2',
    price: 129.0,
    spec: '规格：默认',
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    quantity: 2
  }
]);


//#region 选择
const checkedItems = ref([])
const checkboxGroup = ref(null);
const checkedAll = computed({
  get() {
    return checkedItems.value.length === cartItems.value.length;
  },
  set(val) {
    checkboxGroup.value.toggleAll(val);
  }
});
// #endregion

//#region 删除
function deleteItem(id) {
  cartItems.value = cartItems.value.filter(item => item.id !== id);
}
//#endregion

//#region 提交订单
function onSubmit() {
  if (checkedItems.value.length === 0) {
    Dialog({ message: `请选择商品` });
  } else {
    showBuyInfo.value = true
    console.log("提交订单", cartItems.value
      .filter(item => checkedItems.value.includes(item.id)));
    goodsList.value = cartItems.value
      .filter(item => checkedItems.value.includes(item.id))
  }
}
//#endregion

// #region 弹出框
const showBuyInfo = ref(false)
const goodsList = ref([])
const location = ref({
  stores: '烟台开发凤台小区店一号门店',
  address: '山东烟台市开发区烟台凤台小区12号楼',
  agent: '代理人'
})
const consignee = ref('') // 收货人
// #endregion


// 返回上一页
function back() {
  router.back()
}


</script>

<style lang="scss" scoped>
.shop_box {
  position: relative;
  font-size: 16px;
}

.shop_header {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px;

  .header-css {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #333;
  }
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  position: fixed;
  top: 80px;
  width: 100%;
  z-index: 99;

  .back-icon {
    height: 100%;
    width: 20px;
    color: #666;
    padding: 0 5px;
  }

  .search-input {
    flex: 1;
    border-radius: 100px !important;
  }
}

:deep(.van-search__content) {
  border-radius: 100px !important;
}

.shop_body {
  padding: 0 0 65px 0;
  width: 100%;
  height: calc(100vh - 215px);
  overflow: auto;
}

.shop_card {
  margin: 0 15px 10px 15px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  position: relative;

  .shop_card_left {
    display: flex;
    padding-left: 10px;

    .shop_card_left_img {
      margin: 0 10px;
      width: 80px;
      height: 80px;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }

  .shop_card_right {
    display: flex;
    height: 80%;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    width: 100%;
    overflow: hidden;
    padding: 0 15px 0 0;

    .title,
    .info {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .info,
    .tips {
      color: #87878f;
      font-size: 13px;
    }

    .price {
      color: #ee0a24;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }
  }

  .shop-status {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #7f7f7f;
    padding: 3px 15px;
    font-size: 10px;
    font-weight: 700;
    border-bottom-left-radius: 10px;
    color: white;
  }
}

.shop_footer {
  position: fixed;
  bottom: 60px;
  width: 100%;
  background-color: #fff;

  .settlement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    padding: 0 15px;

    .left {
      display: flex;
      flex: 1;
      justify-content: space-between;
      margin-right: 15px;

      .leftCount {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
}

.delete-button {
  height: 100%;
}

// #region 弹出框样式
.line {
  height: 3px;
  background: repeating-linear-gradient(-45deg, var(--van-warning-color) 0, var(--van-warning-color) 20%, transparent 0, transparent 25%, var(--van-primary-color) 0, var(--van-primary-color) 45%, transparent 0, transparent 50%);
  background-size: 60px;
}

.icon {
  font-size: 25px;
  padding: 0 10px;
}

.address {
  display: flex;
  align-items: center;

  .address_info {
    .address_name {
      font-size: 16px;
      font-weight: 700;
      line-height: 2;
    }

    .address_address {
      font-size: 14px;
      color: #666167;
    }
  }
}

.agent,
.consignee {
  display: flex;
  align-items: center;
  line-height: 2;
}

:deep(.van-cell) {
  padding: 0;
}

.action_show_btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// #endregion</style>